<template>
  <div class="login">
    <div class="login-img">
      <img src="@/assets/img/profile/my.svg" />
    </div>
    <div class="user-info">
      <p class="regi">登陆/注册</p>
      <p class="font-small"> 
        <span class="phone-img">
          <img src="@/assets/img/profile/phone.svg" />
        </span>
        <span>{{message}}</span>
      </p>
    </div>
    <div class="right-angle">
      <div class="arrow"></div>
    </div>
  </div>
</template>
<script>
export default {
  name:'Login',
  data:function(){
    return {
      message:'暂未绑定手机号'
    }
  }
}
</script>
<style scoped>
.login{
  padding: 20px 10px;
  display: flex;
  background-color: var(--color-tint);
}
.login-img{
    width: 60px;
    height: 60px;
    margin: 0 10px;
    background-color: #fff;
    border-radius: 50%;
    
}
.login-img img{
  width: 100%;
}
.user-info{
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  color:aliceblue

}
.regi{
  margin-bottom: 5px;
  padding-left: 5px;
}
.phone-img{
  display: inline-block;
  width: 25px;
  height: 25px;
}
.phone-img img{
  width:100%;
  vertical-align: middle;
}
.arrow{
  width: 20px;
  height: 20px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(45deg);
  
}
.right-angle{
  display: flex;
  justify-content: center;
  align-items: center;

}

</style>